<template>
  <n-layout-sider
      :native-scrollbar="false"
      show-trigger
      collapse-mode="width"
      :collapsed-width="64"
      :width="240"
      bordered>
    <n-menu
        style="width: 100% ;"
        :collapsed-width="64"
        :collapsed-icon-size="22"
        :options="menuOptions"
        key-field="key"
        label-field="label"
        children-field="children"
        :router="true"
        v-model:value="activeKey"
        @update:value="handleMenuSelect"
    >
    </n-menu>
  </n-layout-sider>
</template>
<script setup lang="ts">
import {h, ref, watch} from 'vue'
import {Icon} from '@iconify/vue'
import {useRoute, useRouter} from 'vue-router';
import type {MenuOption} from 'naive-ui'
import {NIcon} from 'naive-ui'

const route = useRoute()
const router = useRouter()
const activeKey = ref(route.path)

watch(() => route.path, (newPath) => {
  activeKey.value = newPath
})

function renderIcon(name: string) {
  return () => h(NIcon, null, {default: () => h(Icon, {icon: name, width: 20, height: 20})})
}

function handleMenuSelect(key: string) {
  router.push(key)
}

const menuOptions: MenuOption[] = [
  {
    label: '首页',
    key: '/dashboard',
    icon: renderIcon('tabler:device-desktop'),
  },
  {
    label: '行程管理',
    key: '/journey',
    icon: renderIcon('tabler:brand-tripadvisor'),
    children: [
      {
        label: '行程列表',
        key: '/journey/journeyList',
        icon: renderIcon('tabler:float-left'),
      }
    ]
  },
  {
    label: '兑换码管理',
    key: '/exchange',
    icon: renderIcon('tabler:repeat'),
    children: [
      {
        label: '兑换码管理',
        key: '/exchange/exchangeCodeList',
        icon: renderIcon('tabler:gift'),
      },
      {
        label: '会员兑换记录',
        key: '/exchange/vipRecordList',
        icon: renderIcon('tabler:vip'),
      }
    ]
  },
  {
    label: '活动管理',
    key: '/activity',
    icon: renderIcon('tabler:confetti'),
    children: [
      {
        label: '活动列表',
        key: '/activity/activityList',
        icon: renderIcon('tabler:layout-board-split'),
      },
      {
        label: '活动记录',
        key: '/activity/activityRecord',
        icon: renderIcon('tabler:license'),
      }
    ]
  },
  {
    label: '用户管理',
    key: '/users',
    icon: renderIcon('tabler:user'),
    children: [
      {
        label: '用户列表',
        key: '/users/userList',
        icon: renderIcon('tabler:users'),
      },
      {
        label: '驾驶员列表',
        key: '/users/driverList',
        icon: renderIcon('tabler:bounce-left'),
      },
      {
        label: '反馈列表',
        key: '/users/feedBack',
        icon: renderIcon('tabler:message-question'),
      }
    ]
  },
  {
    label: '视频&课程',
    key: '/course',
    icon: renderIcon('tabler:book'),
    children: [
      {
        label: '核心&辅助课程',
        key: '/course/coreCourseList',
        icon: renderIcon('tabler:stack-2'),
      },
      {
        label: '安全视频',
        key: '/course/secureVideoList',
        icon: renderIcon('tabler:photo-video'),
      }
    ]
  },
  {
    label: '系统设置',
    key: '/settings',
    icon: renderIcon('tabler:settings'),
    children: [
      {
        label: '后台用户列表',
        key: '/settings/adminUserList',
        icon: renderIcon('tabler:user-shield'),
      },
      {
        label: '文件上传',
        key: '/settings/upLoadToOss',
        icon: renderIcon('tabler:cloud-upload'),
      },
      {
        label: 'app版本',
        key: '/settings/appVersion',
        icon: renderIcon('tabler:versions'),
      }
    ]
  }
]
</script>

<style scoped>

</style>